import { observer } from 'mobx-react'
import React, { useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import {
    Layout,
    Card,
    Avatar,
    Descriptions,
    Tabs,
    Form,
    Input,
    Switch,
    Select,
    Button,
    Affix,
    Row,
    Col,
    Table,
    Space,
    DatePicker,
    Badge
} from 'antd'
import {
    UserOutlined,
} from '@ant-design/icons'
import dayjs from 'dayjs'
const { Content } = Layout
const { TabPane } = Tabs
const { TextArea } = Input
const { RangePicker } = DatePicker

// 模拟表格数据
interface LimitItem {
    key: number
    limitType: string
    limitContent: string
    status: '正常' | '禁用'
    operator: string
    time: string
}

const initialData: LimitItem[] = [
    {
        key: 1,
        limitType: '单次彩金操作上限',
        limitContent: '单次彩金操作上限 ¥100',
        status: '正常',
        operator: 'admin',
        time: '1988-11-01 02:46:23',
    },
    {
        key: 2,
        limitType: '单日彩金操作上限',
        limitContent: '单日彩金操作上限 ¥1000',
        status: '禁用',
        operator: 'admin',
        time: '1988-11-01 02:46:23',
    },
]

const OperationLimit: React.FC = () => {
    const [form] = Form.useForm()
    // 当前激活的货币 Tabs
    const [activeCurrency, setActiveCurrency] = useState('ALL')
    // 表格数据
    const [data, setData] = useState<LimitItem[]>(initialData)

    // 表格列
    const columns = [
        {
            title: '限制类型',
            dataIndex: 'limitType',
        },
        {
            title: '限制内容',
            dataIndex: 'limitContent',
        },
        {
            title: '状态',
            dataIndex: 'status',
            render: (status: string) => {
                const color = status === '正常' ? 'green' : 'red'
                return (
                    <Space>
                        <Badge color={color} />
                        <span>{status}</span>
                    </Space>
                )
            },
        },
        {
            title: '操作人',
            dataIndex: 'operator',
            width: 100,
        },
        {
            title: '操作时间',
            dataIndex: 'time',
            width: 180,
        },
        {
            title: '操作',
            key: 'action',
            width: 120,
            render: (_: any, record: LimitItem) => {
                return (
                    <>
                        <a style={{ marginRight: 8 }} onClick={() => handleEdit(record)}>
                            修改
                        </a>
                        {record.status === '禁用' ? (
                            <a style={{ marginRight: 8 }} onClick={() => handleEnable(record)}>
                                启用
                            </a>
                        ) : (
                            <a style={{ marginRight: 8 }} onClick={() => handleDisable(record)}>
                                禁用
                            </a>
                        )}
                    </>
                )
            },
        },
    ]

    // 表单查询
    const onFinish = (values: any) => {
        console.log('搜索参数:', values)
    }

    // 重置
    const onReset = () => {
        form.resetFields()
    }

    const handleTabChange = (key: string) => {
        console.log('切换到:', key)
        setActiveCurrency(key)
    }

    // 操作
    const handleEdit = (record: LimitItem) => {
        console.log('修改', record)
    }
    const handleEnable = (record: LimitItem) => {
        console.log('启用', record)
    }
    const handleDisable = (record: LimitItem) => {
        console.log('禁用', record)
    }

    return (
        <div className="app-container">
            {/* 搜索表单 */}
            <div className="filterForm">
                <Form
                    form={form}
                    layout="inline"
                    variant={'filled'}
                    onFinish={onFinish}
                    className="form"
                >
                    <Form.Item label="限制类型" name="limitType">
                        <Select placeholder="全部">
                            <Select.Option value="">全部</Select.Option>
                            <Select.Option value="单次彩金操作上限">单次彩金操作上限</Select.Option>
                            <Select.Option value="单日彩金操作上限">单日彩金操作上限</Select.Option>
                        </Select>
                    </Form.Item>

                    <Form.Item label="操作时间" name="time">
                        <RangePicker />
                    </Form.Item>

                    <Form.Item label="状态" name="status">
                        <Select placeholder="全部">
                            <Select.Option value="">全部</Select.Option>
                            <Select.Option value="正常">正常</Select.Option>
                            <Select.Option value="禁用">禁用</Select.Option>
                        </Select>
                    </Form.Item>

                    <Form.Item label="操作人" name="operator">
                        <Input placeholder="请输入操作人用户名" />
                    </Form.Item>
                </Form>
                <div className="rightAction">
                    <Button
                        type="primary"
                        htmlType="submit"
                     >
                        查询
                    </Button>
                    <Button onClick={onReset}>重置</Button>
                </div>
            </div>
            {/* 货币 Tabs */}
            <Tabs activeKey={activeCurrency} onChange={handleTabChange} style={{ marginBottom: 16 }}>
                <TabPane tab="全部" key="ALL" />
                <TabPane tab="USDT" key="USDT" />
                <TabPane tab="USDT(慧)" key="USDT_HUI" />
                <TabPane tab="RMB" key="RMB" />
                <TabPane tab="RMB(慧)" key="RMB_HUI" />
            </Tabs>

            {/* 表格 */}
            <Table
                columns={columns}
                dataSource={data}
                rowKey="key"
            />
        </div>
    )
}

interface LogItem {
    key: number
    index: number
    operationType: string // 操作类型
    ip: string
    method: string // 请求方式
    cost: string // 耗时
    status: '成功' | '失败'
    operator: string // 操作人
    time: string // 操作时间
}

const OperationRecord: React.FC = () => {
    const [form] = Form.useForm()
    const initialData: LogItem[] = [
        {
            key: 1,
            index: 1,
            operationType: '登录成功',
            ip: '223.11.82.1',
            method: 'POST',
            cost: '55/ms',
            status: '成功',
            operator: 'admin',
            time: '1988-11-01 02:46:23',
        },
        {
            key: 2,
            index: 2,
            operationType: '修改列属性',
            ip: '223.11.82.1',
            method: 'GET',
            cost: '55/ms',
            status: '失败',
            operator: 'admin',
            time: '1988-11-01 02:46:23',
        },
    ]
    const [data, setData] = useState<LogItem[]>(initialData)


    // 表格列
    const columns = [
        {
            title: '序号',
            dataIndex: 'index',
            width: 60,
            align: 'center' as const,
        },
        {
            title: '操作类型',
            dataIndex: 'operationType',
        },
        {
            title: 'IP地址',
            dataIndex: 'ip',
            width: 120,
        },
        {
            title: '请求方式',
            dataIndex: 'method',
            width: 100,
            align: 'center' as const,
        },
        {
            title: '耗时',
            dataIndex: 'cost',
            width: 80,
            align: 'center' as const,
        },
        {
            title: '状态',
            dataIndex: 'status',
            width: 80,
            align: 'center' as const,
            render: (status: string) => {
                const color = status === '成功' ? 'green' : 'red'
                return (
                    <Space>
                        <Badge color={color} />
                        {status}
                    </Space>
                )
            },
        },
        {
            title: '操作人',
            dataIndex: 'operator',
            width: 80,
            align: 'center' as const,
        },
        {
            title: '操作时间',
            dataIndex: 'time',
            width: 160,
        },
        {
            title: '操作',
            key: 'action',
            width: 80,
            align: 'center' as const,
            render: (_: any, record: LogItem) => (
                <a onClick={() => handleDetail(record)}>详情</a>
            ),
        },
    ]

    // 查询
    const onFinish = (values: any) => {
        console.log('搜索条件:', values)
    }

    // 重置
    const onReset = () => {
        form.resetFields()
    }

    // 查看详情
    const handleDetail = (record: LogItem) => {
        console.log('查看详情：', record)
    }

    return (
        <div className="app-container">
            {/* 搜索表单 */}
            <div className="filterForm">
                <Form
                    form={form}
                    layout="inline"
                    onFinish={onFinish}
                    className="form"
                >
                    <Form.Item label="操作类型" name="operationType">
                        <Select placeholder="全部">
                            <Select.Option value="">全部</Select.Option>
                            <Select.Option value="登录成功">登录成功</Select.Option>
                            <Select.Option value="修改列属性">修改列属性</Select.Option>
                            {/* 其他类型 */}
                        </Select>
                    </Form.Item>

                    <Form.Item label="操作时间" name="timeRange">
                        <RangePicker
                            ranges={{
                                今天: [dayjs(), dayjs()],
                                最近一周: [dayjs().subtract(7, 'day'), dayjs()],
                            }}
                        />
                    </Form.Item>

                    <Form.Item label="状态" name="status">
                        <Select placeholder="全部">
                            <Select.Option value="">全部</Select.Option>
                            <Select.Option value="成功">成功</Select.Option>
                            <Select.Option value="失败">失败</Select.Option>
                        </Select>
                    </Form.Item>

                    <Form.Item label="操作人" name="operator">
                        <Input placeholder="请输入操作人用户名"/>
                    </Form.Item>
                </Form>
                <div className="rightAction">
                    <Button type="primary" htmlType="submit">
                        查询
                    </Button>
                    <Button onClick={onReset}>重置</Button>
                </div>
            </div>
            {/* 表格 */}
            <Table<LogItem>
                columns={columns}
                dataSource={data}
                rowKey="key"
                pagination={{ pageSize: 10 }}
            />
        </div>
    )
}

const StaffManagementEdit: React.FC = () => {
    const [form] = Form.useForm()
    const navigate = useNavigate()
    const { id } = useParams() // 判断是编辑还是新增

    const isEdit = !!id

    const userInfo = {
        username: 'username1',
        realName: '张三',
        email: '177******35@qq.com',
        registerTime: '2012-10-16 23:55:35',
        lastLoginTime: '2012-10-16 23:55:35',
        userId: 'op755975980',
        role: '管理员',
        position: '部门负责人',
        intro: '这里是一段个人简介',
        status: true,
    }

    // 提交表单
    const onFinish = (values: any) => {
        console.log('提交数据:', values)
        // 调后端保存...
        if (isEdit) {
            // 编辑员工
        } else {
            // 新增员工
        }
        // 保存成功后可回到列表
        navigate('/employee')
    }

    // 初始化表单（编辑场景回填）
    React.useEffect(() => {
        if (isEdit) {
            // 用 userInfo 填充
            form.setFieldsValue({
                username: userInfo.username,
                realName: userInfo.realName,
                role: userInfo.role,
                position: userInfo.position,
                intro: userInfo.intro,
                status: userInfo.status,
            })
        }
    }, [isEdit])

    return (
        <div className="add-app-detail">
             <div className="basic-info">
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                        {/* 头像 */}
                        <Avatar
                            size={64}
                            icon={<UserOutlined />}
                            style={{ marginRight: 16 }}
                        />
                        {/* 描述信息 */}
                        <Descriptions column={2} bordered={false} style={{ flex: 1 }}>
                            <Descriptions.Item label="用户名">
                                {userInfo.username}
                            </Descriptions.Item>
                            <Descriptions.Item label="姓名">
                                {userInfo.realName}
                            </Descriptions.Item>
                            <Descriptions.Item label="账号ID">
                                {userInfo.userId}
                            </Descriptions.Item>
                            <Descriptions.Item label="邮箱">
                                {userInfo.email} <a style={{ marginLeft: 8 }}>修改</a>
                            </Descriptions.Item>
                            <Descriptions.Item label="注册时间">
                                {userInfo.registerTime}
                            </Descriptions.Item>
                            <Descriptions.Item label="最近登录时间">
                                {userInfo.lastLoginTime}
                            </Descriptions.Item>
                        </Descriptions>
                    </div>
                </div>
                <div className="basic-info">
                    {/* Tabs */}
                    <Tabs defaultActiveKey="basic" style={{ background: '#fff', padding: 16}}>
                        <TabPane tab="基本信息" key="basic">
                            <Card style={{ minHeight: 300, boxShadow: 'none' }} bordered={false}>
                                <Form
                                    form={form}
                                    labelCol={{ span: 4 }}
                                    wrapperCol={{ span: 8 }}
                                    onFinish={onFinish}
                                >
                                    <Form.Item
                                        label="用户名"
                                        name="username"
                                        rules={[{ required: true, message: '请输入用户名' }]}
                                    >
                                        <Input placeholder="请输入用户名" />
                                    </Form.Item>

                                    <Form.Item
                                        label="姓名"
                                        name="realName"
                                        rules={[{ required: true, message: '请输入姓名' }]}
                                    >
                                        <Input placeholder="请输入姓名" />
                                    </Form.Item>

                                    <Form.Item
                                        label="角色"
                                        name="role"
                                        rules={[{ required: true, message: '请选择角色' }]}
                                    >
                                        <Select placeholder="请选择角色">
                                            <Select.Option value="管理员">管理员</Select.Option>
                                            <Select.Option value="超级管理员">超级管理员</Select.Option>
                                            <Select.Option value="编辑员">编辑员</Select.Option>
                                        </Select>
                                    </Form.Item>

                                    <Form.Item
                                        label="岗位"
                                        name="position"
                                        rules={[{ required: true, message: '请输入岗位' }]}
                                    >
                                        <Input placeholder="请输入岗位，如 部门负责人" />
                                    </Form.Item>

                                    <Form.Item label="个人简介" name="intro">
                                        <TextArea rows={4} maxLength={200} placeholder="最多不超过200字" />
                                    </Form.Item>

                                    <Form.Item label="状态" name="status" valuePropName="checked">
                                        <Switch checkedChildren="启用" unCheckedChildren="禁用" />
                                    </Form.Item>
                                </Form>
                            </Card>
                        </TabPane>

                        <TabPane tab="安全设置" key="security">
                            <Card bordered={false} style={{ minHeight: 200, boxShadow: 'none' }}>
                                {/* 登录密码 */}
                                <Row
                                    style={{
                                        padding: '16px 0',
                                        borderBottom: '1px solid #f0f0f0',
                                    }}
                                    align="middle"
                                >
                                    <Col flex="none" style={{ width: 100 }}>
                                        登录密码
                                    </Col>
                                    <Col flex="auto" style={{ color: '#999' }}>
                                        已设置。密码至少 6 位字符，支持数字、字母和除空格外的特殊字符，且必须包含数字和大小写字母。
                                    </Col>
                                    <Col flex="none" style={{ width: 60, textAlign: 'right' }}>
                                        <a>修改</a>
                                    </Col>
                                </Row>

                                {/* 动态验证 */}
                                <Row
                                    style={{
                                        padding: '16px 0',
                                    }}
                                    align="middle"
                                >
                                    <Col flex="none" style={{ width: 100 }}>
                                        动态验证
                                    </Col>
                                    <Col flex="auto" style={{ color: '#999' }}>
                                        您暂未设置绑定动态验证，动态验证可以有效保护账号的安全。
                                    </Col>
                                    <Col flex="none" style={{ width: 60, textAlign: 'right' }}>
                                        <a>设置</a>
                                    </Col>
                                </Row>
                            </Card>
                        </TabPane>

                        <TabPane tab="操作限制" key="limit">
                            <OperationLimit />
                        </TabPane>

                        <TabPane tab="操作记录" key="log">
                        <OperationRecord />
                        </TabPane>
                    </Tabs>
                </div>
            {/* 底部按钮固定 */}
            <div className="form-actions">
                <Button
                    type="primary"
                    style={{ marginRight: 8 }}
                    onClick={() => form.submit()}
                >
                    保存
                </Button>
                <Button onClick={() => navigate(-1)}>返回</Button>
            </div>
        </div>
    )
}
export default observer(StaffManagementEdit)
